<script setup lang="ts">
import type { SongInfo } from '@/types/Playing'
import { ref } from 'vue'

const props = defineProps<{
  songInfo: SongInfo,
  icon: string
}>()
const count = ref(0)
if (props.icon === props.songInfo.likeIcon) {
  count.value = props.songInfo.likeCount
}
else if (props.icon === props.songInfo.comIcon) {
  count.value = props.songInfo.comCount
}
else {
  count.value = props.songInfo.shareCount
}
const emit = defineEmits(['onLike', 'onRecommend', 'onShare'])
const onCommint = () => {
  if (props.icon === props.songInfo.likeIcon) {
    emit('onLike')
  }
  else if (props.icon === props.songInfo.comIcon) {
    emit('onRecommend')
  }
  else {
    emit('onShare')
  }
}
// onMounted(()=>{
//   const icon = document.querySelector('.song-icon')
//   icon?.classList.add(props.icon)
// })
</script>

<template>
  <div>
    <!-- icon-micbxihuanm -->
    <div class="item-content" @click="onCommint">
      <span class="iconfont icon " :class="icon" ></span>
      <span class="number"> {{ count }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-content {
  display: inline-block;
  background-color: transparent;
  position: absolute;
  display: flex;
}

.icon {
  display: inline-block;
  font-size: 10vw;
  line-height: 10vw;
  color: #fff;
}

.number {
  display: inline-block;
  font-size: 3vw;
  line-height: 3vw;
  color: #fff;
  position: relative;
  top: 0;
  right: 0;
  background-color: transparent;
  z-index: 10;
}

.like {
  color: red;
}
</style>